<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <head>
        <meta charset="UTF-8">
        <title>轮播图管理</title>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
        <link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/css/inputfile.css">
        <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/datagrid-detailview.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/template-native.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/other.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#looplist').datagrid({

                    url: '${pageContext.request.contextPath}/loop/findByPage',
                    // data: {
                    //     "total": 5,
                    //     "rows": [
                    //         {
                    //             "id": 17,
                    //             "imgurl": "1565249783445.jpg",
                    //             "article": {
                    //                 "title": "二手iPhone XR"
                    //             },
                    //             "articleId": 11,
                    //             "status": 1,
                    //         },
                    //         {
                    //             "id": 19,
                    //             "imgurl": "1565663242547.jpg",
                    //             "article": {
                    //                 "title": "二手书籍"
                    //             },
                    //             "articleId": 21,
                    //             "status": 0,
                    //         }
                    //     ]
                    // },
                    columns: [
                        [
                            {field: 'id', title: '序号',width: '8%', align: 'center', formatter:function(val,row,index){
                                  return index+1;
                            }},
                            {field: 'article', title: '所属物品', width: '35%', align: 'center',formatter:function(val,row){
                                if(val == null){
                                    return "数据丢失";
                                }
                                return val.title;
                            }},
                            {field: 'status', title: '状态', width: '35%', align: 'center', formatter: function(val, row, index){
                                var str = "数据异常";
                                if (val == 1) {
                                    str = '<span style="color:red;">已推广</span>';
                                }else{
                                    str = '<span style="color:green;">已下架</span>';
                                }
                                return str;
                            }}
                        ]
                    ],
                    loadMsg: "数据加载中,请稍后...",
                    pagination: true,
                    title:"轮播图列表",
                    iconCls: 'icon-save',
                    remoteSort:false,
                    singleSelect:true,
                    nowrap:false,
                    fitColumns:true,
                    view: detailview,
                    detailFormatter: function(rowIndex, rowData){
                        // let html = "<img src=https://ysd.eastarchain.net/eastarimg/"+rowData.url+" style='width:200px;'/>"
                        let html = "<img src=http://192.168.4.8:8080/"+rowData.imgurl+" style='width:200px;'/>"
                        return html;
                    },
                    toolbar: "#tb",
                    pagination: true,
                    pageSize: 20,
                    singleSelect: true,
                    pageList: [5,10,20]
                })

                $("#dd_article").dialog({
                    title: '添加物品轮播图',
                    width: 500,
                    height: 400,
                    closed: true,
                    cache: false,
                    href: '',
                    modal: true,
                    iconCls: 'icon-save',
                    buttons: [{
                        text: '提交',
                        iconCls: 'icon-add',
                        handler: addOrUpDatePrdpuct
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {

                            $("#dd_article").dialog("close");
                        }
                    }]
                });

                $("#dd_notice").dialog({
                    title: '添加公告轮播图',
                    closed: true,
                    cache: false,
                    fit: true,
                    modal: true,
                    iconCls: 'icon-save',
                    buttons: [{
                        text: '提交',
                        iconCls: 'icon-ok',
                        handler: function () {
                            let childWindow = $('#dd1')[0].contentWindow;
                            childWindow.addLoop();
                        }
                    }, {
                        text: '关闭',
                        handler: function () {
                            $("#dd_notice").dialog("close");
                        }
                    }]
                });

                $("#articleSelect").combobox({

                    url: 'articles/findAll',
                    textField: 'title',
                    valueField: 'id',
                    label: '所属物品：',
                    labelWidth:70,
                    required: true
                });

                $('#loop_enable').click(function(){
                    var row = $('#looplist').datagrid("getSelected");
                    if(row==null){
                        alert("请先选中需要操作的图片");
                        return;
                    }
                    $.ajax({
                        type:"post",
                        url: "${pageContext.request.contextPath}/loop/modifyStatus",
                        data:{
                            id: row.id,
                            flag: 1
                        },
                        dataType:"json",
                        success:function(result){
                            $('#looplist').datagrid("reload"); //刷新页面
                        }
                    });
                });

                $("#loop_delete").click(function(){
                    var row = $('#looplist').datagrid("getSelected");
                    console.log("1111111111111111");
                    console.log(row.url);
                    if(row==null){
                        alert("请先选中需要删除的图片");
                        return;
                    }
                    $.ajax({
                        type:"post",
                        url: "${pageContext.request.contextPath}/loop/delete",
                        data:{
                            id: row.id,
                            fileName:  row.url
                        },
                        dataType:"json",
                        success:function(result){
                            $('#looplist').datagrid("load"); //刷新页面
                        }
                    });
                });

                $('#loop_disable').click(function(){
                    var row = $('#looplist').datagrid("getSelected");
                    if(row==null){
                        alert("请先选中需要操作的图片");
                        return;
                    }
                    $.ajax({
                        type:"post",
                        url: "${pageContext.request.contextPath}/loop/modifyStatus",
                        data:{
                            id: row.id,
                            flag: -1
                        },
                        dataType:"json",
                        success:function(result){
                            alert(result.msg);
                            $('#looplist').datagrid("reload"); //刷新页面
                            // if (result.status == 0){
                            //     $('#looplist').datagrid("reload"); //刷新页面
                            // }
                            // if(result.status == 1){
                            //     $('#looplist').datagrid("reload"); //刷新页面
                            // }
                        }
                    });
                });
            })

            function getForm(){
                var form=null;
                let fileInput = $('#imgurl_loop').get(0).files[0];
                form= new FormData();
                if(null!=fileInput){
                    form.append("file",fileInput);
                }
                form.append("articleId",$('#articleSelect').combobox('getValue'));
                return form;
            }

            function addOrUpDatePrdpuct(){
                var form = getForm();
                if(null==form){
                    alert("请选择图片");
                    return;
                }
                MaskUtil.mask();
                $.ajax({

                    url:"${pageContext.request.contextPath}/loop/addloop",
                    type:"POST",
                    data:form,
                    dataType:"json",
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        MaskUtil.unmask();
                        $("#dd_article").dialog();
                        $('#looplist').datagrid("reload"); //刷新页面
                    },error:function(data){
                        MaskUtil.unmask();
                        $.messager.alert('提示',data.msg,'error');
                        $("#dd_article").dialog();
                    }
                });

            }

            function changeHeader(obj){
                var file = obj.files[0];
                var url = window.URL.createObjectURL(file);
                $("#head").attr("src",url);
            }

            function showAddArticle(){
                $('#articleSelect').combobox('setValue',"");
                $('#head').attr("src","images/zwtp.png");
                $('#dd_article').dialog('open');
            }

            function showAddNotice() {
                $("#dd1").attr("src", "loopnotice");
                // $("#dd1").attr("src", "ueditor/controller/");
                $("#dd_notice").dialog("open");
            }
        </script>
    </head>
<body>

<!-- 工具栏模块 -->
<div id="tb" style="padding:3px">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:showAddArticle();">新增物品轮播</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:showAddNotice();">新增公告轮播</a>
    <a href="#" id="loop_enable" class="easyui-linkbutton" iconCls="icon-undo" plain="true">启用</a>
    <a href="#" id="loop_disable" class="easyui-linkbutton" iconCls="icon-redo" plain="true">禁用</a>
    <a href="#" id="loop_delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>


<!-- 列表展示模块 -->
<table id="looplist"></table>


<!-- 添加模块 -->
<div id="dd_article" style="padding-left: 20%;padding-top: 20px;">
    <form id="ff_add">
        <div style="margin-bottom:30px">
            <input id="articleSelect" style="width:80%;height: 30px;">
        </div>
        <div style="margin-bottom:30px">
            <table>
                <tr>
                    <td valign="top">
                        <a href="javascript:;" class="file">选择封面图片
                            <input type="file" id="imgurl_loop"  onchange="changeHeader(this);">
                        </a>
                    </td>
                    <td >
                        <img src="images/zwtp.png"  id="head" style="width: 200px;height: 200px;" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>

<div id="dd_notice">
    <iframe scrolling='auto' frameborder='0' id='dd1' style='width:100%; height:100%; display:block;'></iframe>
</div>

</body>
</html>